<template>
  <view class="item_contain">
    <view class="tick-content">
      <view class="tick_h">
        <view class="tick_header">
          <view class="test">
            <nut-checkbox v-model="item.check" :label="item.bllNo" @change="checkOne(item)"></nut-checkbox>
            <image src="@/assets/images/orderTracking/icon_jijiandan.png"></image>
            <view class="text">承运单号：{{ item.billNo }}</view>
          </view>
          <!-- <view
            class="right"
            :class="{ status_active: item.wxStatus == 4 || item.wxStatus == 6 }"
            >{{ item.statusVal }}</view
          > -->
        </view>
        <view class="tick_address">
          <image src="@/assets/images/orderTracking/kapian_icon_fahuodi.png"></image>
          <view class="text">{{ item.shipper }}</view>
          <view class="text1">{{ item.toProvince }}{{ item.toFromCity }}</view>
        </view>
        <view class="tick_address">
          <image src="@/assets/images/orderTracking/icon_shoujiandan.png"></image>
          <view class="text">{{ item.receiver }}</view>
          <view class="text1">{{ item.fromProvince }}{{ item.fromCity }}</view>
        </view>
        <view class="tick_goods">
          <view class="top">
            <view class="left">货物信息：</view>
            <view class="right">{{ goodsInfoString(item) }}</view>
          </view>
          <view class="top">
            <view class="left">下单时间：</view>
            <view class="right">{{
              dayjs(item.creaTetime).format("YYYY-MM-DD HH:mm:ss")
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tick-foot">
      <view class="foot_left">{{
        item.clearingForm == "1"
        ? "现付"
        : item.clearingForm == "2"
          ? "提付"
          : "签单"
      }}</view>
      <view class="foot_right">
        <!-- <nut-button class="bt-short-white" @click="deleteclick(item.ssoId)" v-if="item.statusVal == '待审核'">取消运单</nut-button> -->
        <!-- <nut-button type="info" class="bt-short-Blue" @click="confirmOd(item)" v-if="item.statusVal == '待审核'">审核运单</nut-button> -->

        <nut-button type="default" class="bt-short-white" style="width: 166rpx"
          @click="gotoForwarding(item)">转代送</nut-button>
        <nut-button plain class="bt-short-white" type="info" @click="pickupOne(item)">办理取货</nut-button>

        <!-- <nut-button type="info" class="bt-short-white" style="width: 166rpx"  v-if="item.statusVal == '待确认'">修改运单</nut-button> -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import { OrderListType } from "../orderTracking/listType";
// import useOrderStore from '@/store/order';
import dayjs from "dayjs";
import Taro, { env } from "@tarojs/taro";
// import { reset } from "../sendGoods/reset";
import useMyOrderStore from "@/store/myOrder";
import { getChangeData } from "../sendGoods/reset";
import useTransactionStore, { transaction } from "../../store/pickUp";
import useUserInfoStore from "../../store/user";

const order = useMyOrderStore();
const userStore = useUserInfoStore();

const transactionStore = useTransactionStore();

const props = defineProps<{
  item: any;
  showList: any;
}>();
const emit = defineEmits<{
  (e: "chooseAll", args: boolean);
}>();
const item = props.item;
//单选
function checkOne(item: any) {
  let flag: boolean = true;
  props.showList.forEach((aa: any) => {
    if (!aa.check) {
      flag = false;
    }
  });
  emit("chooseAll", flag);

}
//单个取货
function pickupOne(item: any) {
  let list: any = [];
  list.push(item)
  transaction({ bills: list, customerCode: userStore.userInfo.customerCode })
}
//单个转代送
function gotoForwarding(item: any) {
  let aa: any = [];
  aa.push(item)
  transactionStore.transactionList = aa;
  Taro.navigateTo({
    url: "/pages/pickUp/forwarding",
  });
}
function onceAgin() {
  // reset();
  Taro.navigateTo({
    url: "/pages/sendGoods/index",
  });
}
function gotoPay(item) {
  order.payList = item;
  Taro.navigateTo({
    url: "/pages/pay/index",
  });
}
function lookIt(item) {
  console.log("look");

  if (process.env.TARO_ENV === "h5") {
    order.trackingList = item;
    Taro.navigateTo({
      url: "pages/orderTracking/h5map",
    });
  } else {
    order.payList = item;
    Taro.navigateTo({
      url: "/pages/orderTracking/map",
    });
  }
}
function goodsInfoString(item) {
  let goods = "";
  item.goodsInfo.forEach((it) => {
    goods =
      goods +
      it.goodsName +
      it.goodsNumber +
      "件," +
      it.weigh +
      "Kg," +
      it.goodsVolume +
      "m³," +
      it.packing +
      ";";
  });
  return goods;
}
// const orderStore = useOrderStore()
//跳转到修改订单
function gotoChange(item: any) {
  console.log(item, "item");
  getChangeData(item);
  Taro.navigateTo({
    url: "/pages/changeOrder/changeItem",
  });
}
function statuTrans(item) {
  if (item == 1) {
    return "待确认";
  } else if (item == 2) {
    return "待支付";
  } else if (item == 3) {
    return "未发货";
  } else if (item == 4) {
    return "运输中";
  } else if (item == 5) {
    return "待签收";
  } else if (item == 6) {
    return "已完成";
  }
}
</script>

<style lang="scss">
.tick_h {
  width: 100%;
  height: 100%;

  padding: 24rpx;
  box-sizing: border-box;

  .tick_header {
    width: 654rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .test {
      display: flex;
      align-items: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .text {
        font-family: PingFang SC;
        font-size: 22rpx;
        margin-left: 24rpx;
        color: #252525;
      }
    }

    .status_active {
      background: rgba(9, 102, 255, 0.16) !important;
      color: #0966ff !important;
    }

    .right {
      width: 96rpx;
      height: 40rpx;
      border-radius: 8rpx;
      background: rgba(255, 143, 31, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-size: 24rpx;
      color: #ff8f1f;
    }
  }

  .tick_address {
    width: 654rpx;
    height: 40rpx;

    margin-top: 24rpx;
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 700;
    color: #252525;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    .text {
      margin-left: 24rpx;
    }

    .text1 {
      margin-left: 24rpx;
    }
  }

  .tick_goods {
    width: 654px;
    height: 128px;
    border-radius: 8px;
    background: #f5f5f5;
    margin-top: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;

    .top {
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #666666;
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      .left {
        margin-right: 24rpx;
      }

      .right {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2; //显示几行
      }
    }
  }
}

.item_contain {
  .tick-foot {
    width: 100%;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20rpx;
    box-sizing: border-box;

    .foot_left {
      margin-left: 24rpx;
      font-family: PingFang SC;
      font-size: 28rpx;
      font-weight: 700;
      color: #252525;

      z-index: 1;
    }

    .foot_right {
      display: flex;
      align-items: center;
    }
  }

  .blue {
    color: #0966ff !important;
  }

  .red {
    color: #fa5151 !important;
  }

  .yellow {
    color: #ff8a00 !important;
  }

  .bt-short-white {
    font-size: 28rpx !important;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18rpx;
    width: 150rpx;
    height: 50rpx;
    // border: 1rpx solid #c4c4c4;
    border-radius: 90rpx;
    margin-right: 16rpx;
    white-space: nowrap;
  }

  .bt-short-Blue {
    font-size: 28rpx !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18rpx;
    width: 150rpx;
    height: 50rpx;
    border: 1rpx solid #0966ff;
    background-color: #0966ff;
    color: #fff;
    border-radius: 90rpx;
    margin-right: 16rpx;
    white-space: nowrap;
  }

  .tick-content {
    height: 345rpx;
    width: 100%;
  }

  .tick-content-two {
    margin-left: 10rpx;
    width: 93%;
  }

  .tick-content-three {
    margin-left: 10rpx;
    width: 93%;
    height: 60rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
  }

  .tick-content-one {
    margin-left: 10rpx;
    width: 93%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 100rpx;
    margin-bottom: 10rpx;

    .tick-content-one-text {
      width: 150rpx;
      height: 70rpx;

      .zhuantai {
        width: 150rpx;
        line-height: 70rpx;
        height: 24rpx;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;

        image {
          height: 10rpx;
          width: 160rpx;
        }
      }

      .tick-content-one-text-top {
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 30rpx;
        font-weight: bold;
        white-space: nowrap;
      }

      .tick-content-one-text-bottom {
        width: 100%;
        height: 35rpx;
        line-height: 50rpx;
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .orderList {
    box-sizing: border-box;
    background: white;
    margin-bottom: 16rpx;
    border-radius: 16rpx;

    margin-top: 24rpx;
  }
}
</style>
